<template>
    <div id="video">
        <transition :name="transitionName">
            <keep-alive include="home" >
                <router-view class="child-view"> </router-view>
            </keep-alive>
        </transition>
        <vfooter />
    </div>
</template>

<script>
import vfooter from './components/vfooter.vue'

export default {
    name: 'app',
    components:{
        vfooter
    },
    data () {
        return{
            transitionName: 'slide-left',
            isShow: true
        }
    },
 
}
</script>

<style scoped="">

.child-view {
    position: absolute;
    width:100%;
    transition: all .4s ;
}
.slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    transform: translate(100%, 0);
}
.slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    transform: translate(-100%, 0);
}
</style>
